<template>
  <PageWrapper contentClass="flex" contentFullHeight>
    <template #headerContent>
      <div class="">
        用户账号： 18306561056 昵称： 18306561056 会员等级： 普通会员 注册时间： 2024-08-23 11:08:35
        最后访问时间： 2024-08-23 11:08:35
      </div>
      <div class=""> 用户余额： 18306561056 积分： 56</div>
    </template>
    <div class="bg-white p-4 w-full">
      <Tabs v-model:activeKey="state.keyActiveTab" @change="onTabChange">
        <TabPane key="1" tab="余额">
          <BasicTable @register="registerTable" />
        </TabPane>
        <TabPane key="2" tab="积分">
          <BasicTable @register="registerTable" />
        </TabPane>
        <TabPane key="3" tab="收藏记录">
          <BasicTable @register="registerTable" />
        </TabPane>
        <TabPane key="4" tab="浏览记录">
          <BasicTable @register="registerTable" />
        </TabPane>
      </Tabs>
    </div>
  </PageWrapper>
</template>
<script lang="ts" setup>
  import { reactive, toRaw } from 'vue';
  import { PageWrapper } from '@/components/Page';
  import { TabPane, Tabs } from 'ant-design-vue';
  import { useRoute } from 'vue-router';
  import { BasicTable, useTable } from '@/components/Table';
  import { ColumnPageBalance } from './data';
  import { getMemberAccountPage } from '@/modules/member/api';

  const route = useRoute();
  //数据
  const state = reactive({
    keyActiveTab: '1',
    //商品信息
    goodsId: 0,
    goodsInfo: {} as any,
  });
  // tab change ++++++++++++++++++
  const onTabChange = () => {
    const tabKey = toRaw(state.keyActiveTab);
    console.log('当前key:', tabKey);

    if (tabKey === 2) {
    }
  };
  //余额++++++++++++++++++++++++++++++++
  const [registerTable, { reload, updateTableDataRecord }] = useTable({
    title: '',
    api: getMemberAccountPage,
    rowKey: 'id',
    columns: ColumnPageBalance,
    useSearchForm: false,
    showTableSetting: false,
    bordered: true,
  });
</script>
<style lang="less" scoped></style>
